/* 用户信息 */
<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />

    <van-cell-group>
      <input
        type="file"
        hidden
        ref="photo"
        @change="changePhoto"
        accept="image/*"
      />
      <van-cell title="头像" is-link center @click="$refs.photo.click()">
        <van-image width="35" height="35" round fit="cover" :src="user.photo" />
      </van-cell>
      <van-cell
        title="昵称"
        is-link
        :value="user.name"
        @click="showEditName = true"
      />
      <van-cell
        title="性别"
        is-link
        @click="showEditGender = true"
        :value="user.gender ? '女' : '男'"
      />
      <van-cell
        title="生日"
        is-link
        :value="user.birthday"
        @click="showBirthdayPicker = true"
      />
    </van-cell-group>

    <van-popup
      class="EditName"
      v-model="showEditName"
      round
      position="bottom"
      :style="{ height: '85%' }"
      lock-scroll
      closeable
      close-icon-position="top-left"
      :close-on-click-overlay="false"
      transition-appear
      safe-area-inset-bottom
    >
      <!-- 原始写法 
        <updateName
        :name="user.name"
        @updateName="user.name = $event"
        @close="showEditName = false"
      /> -->

      <!-- V-model写法 
        会默认传递一个 value数据
        会默认监听 input 事件 @input="user.name = $event"
      -->
      <updateName
        v-if="showEditName"
        v-model="user.name"
        @close="showEditName = false"
      />
    </van-popup>

    <van-popup
      v-model="showEditGender"
      round
      safe-area-inset-bottom
      position="bottom"
    >
      <ChangeGender
        v-if="showEditGender"
        @close="showEditGender = false"
        v-model="user.gender"
      />
    </van-popup>

    <van-popup
      v-model="showBirthdayPicker"
      round
      position="bottom"
      v-if="showBirthdayPicker"
    >
      <SelectBirthday
        v-if="showBirthdayPicker"
        @close="showBirthdayPicker = false"
        v-model="user.birthday"
      />
    </van-popup>

    <van-popup
      class="img-popup"
      v-model="showUpdatePhoto"
      safe-area-inset-bottom
      position="bottom"
      :style="{ height: '100%' }"
    >
      <UpdatePhoto
        :ImgBlob="ImgBlob"
        @updatePhoto="user.photo = $event"
        @close="showUpdatePhoto = false"
        v-if="showUpdatePhoto"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from "../../api/user";
import updateName from "./components/update-name.vue";
import ChangeGender from "./components/change-gender.vue";
import SelectBirthday from "./components/select-birthday.vue";
import UpdatePhoto from "./components/update-photo.vue";
export default {
  name: "UserProfile",
  data() {
    return {
      user: "",
      showEditName: false,
      showEditGender: false,
      showBirthdayPicker: false,
      showUpdatePhoto: false,
      ImgBlob: null,
    };
  },
  methods: {
    async getUser() {
      const { data } = await getUserProfile();
      this.user = data.data;
    },
    changePhoto() {
      this.ImgBlob = this.$refs.photo.files[0];

      this.showUpdatePhoto = true;

      //清空 选中 状态
      this.$refs.photo.value = "";
    },
  },
  created() {
    this.getUser();
  },
  components: {
    updateName,
    ChangeGender,
    SelectBirthday,
    UpdatePhoto,
  },
};
</script>

<style lang="less" scoped>
.EditName {
  padding-top: 51px;
  background-color: rgb(245, 247, 249);
}
.img-popup {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>